<template>
  <div class="contentlist">
    <div class="top">
      <div class="left">
        <div class="selectall">
          <div class="quanbushanchu">
            <button class="batchDelete" @click="showCheckbox = true" v-if="!showCheckbox">批量删除</button>

            <div v-if="showCheckbox" class="deleteAllFunction">
              <button @click="showCheckbox = false" class="cancelDeletion">取消删除</button>
              <button class="selectAll">
                <a-checkbox v-model:checked="checkAll" @change="onCheckAllChange">全选</a-checkbox>
              </button>
              <div class="reduction" @click="handledelete" v-if="showCheckbox">
                <dd>
                  <i class="appIcon-iconfont appIcon-lajixiang-huanyuanmoren"></i>
                </dd>还原
              </div>
              <div class="delete" @click="handledelete" v-if="showCheckbox">
                <dd>
                  <i class="appIcon-iconfont appIcon-shanchu"></i>
                </dd>删除
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>共{{ dataList.length }}个项目</div>
      <div class="right">
        <div class="searchclass" v-if="sousuo" @click="sousuo = false">
          <i class="appIcon-iconfont appIcon-sousuo"></i>
        </div>
        <!-- <input type="text" name id /> -->
        <a-input-search v-else v-model:value="searchValue" placeholder="搜索项目名称" style="width: 200px;"
          @search="onSearch" />
        <div class="type" @click="changetype(1)" v-if="type == 1">
          <i class="appIcon-iconfont appIcon-tubiaozhanshi"></i>
        </div>
        <div class="type" @click="changetype(2)" v-else>
          <i class="appIcon-iconfont appIcon-liebiaozhanshi"></i>
        </div>
      </div>
    </div>
    <div class="list2" v-show="type == 2">
      <ul>
        <a-checkbox-group v-model:value="checkboxValue" style="width: 100%;">
          <li v-for="(item, index) in dataList" :key="index">
            <div class="box">
              <a-checkbox :value="item.hhxsChartId" class="checkbox groupbox" v-show="showCheckbox"></a-checkbox>
              <img :src="item.imageUrl" v-if="item.imageUrl" @click="toDetail(item.hhxsChartId)" />
              <img src="https://picsum.photos/id/11/10/6" v-else @click="toDetail(item.hhxsChartId)" />
              <p @click="toDetail(item.hhxsChartId)">{{ item.title }}</p>
            </div>
            <div class="edit">
              <a-tooltip placement="top" overlayClassName="draw_atooltip">
                <dd @click="toBack(item)">
                  <i class="appIcon-iconfont appIcon-lajixiang-huanyuanmoren"></i>
                </dd>
                <template #title>还原</template>
              </a-tooltip>

              <a-tooltip placement="top" overlayClassName="draw_atooltip">
                <dd @click="deleteitem(item)">
                  <i class="appIcon-iconfont appIcon-wenjianhuishou-zhihuimoren"></i>
                </dd>
                <template #title>清理</template>
              </a-tooltip>
            </div>
          </li>
        </a-checkbox-group>
      </ul>
    </div>

    <div class="list" v-show="type == 1">
      <ul>
        <a-checkbox-group v-model:value="checkboxValue" style="width: 100%;">
          <li v-for="(item, index) in dataList" :key="index" :style="`height:${height}px`">
            <div class="box conentbox" :style="`background:${item.params.bgColor}`">
              <img :src="item.imageUrl" v-if="item.imageUrl" />
              <a-checkbox :value="item.hhxsChartId" class="checkbox groupbox" v-show="showCheckbox"></a-checkbox>
              <div class="edit">
                <a-tooltip placement="top" overlayClassName="draw_atooltip">
                  <dd @click="toBack(item)" class="listRestore">
                    <i class="appIcon-iconfont appIcon-lajixiang-huanyuanmoren"></i>
                  </dd>
                  <template #title>还原</template>
                </a-tooltip>

                <a-tooltip placement="top" overlayClassName="draw_atooltip">
                  <dd @click="deleteitem(item)">
                    <i class="appIcon-iconfont appIcon-wenjianhuishou-zhihuimoren"></i>
                  </dd>
                  <template #title>清理</template>
                </a-tooltip>
              </div>
              <div class="mask"></div>
            </div>
            <p>{{ item.title }}</p>
          </li>
        </a-checkbox-group>
      </ul>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, watch, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import request from "@/utils/request"
import { copyText, readClipboard } from '@/utils/clipboard'
import { message } from 'ant-design-vue'
import { getBoxWidth } from '@/hooks/useGlobalFun'

export default defineComponent({
  name: 'Contentlist',
  setup() {
    const sousuo = ref<boolean>(true)
    let height = ref(250)
    const copyState = ref('复制')
    const searchValue = ref('')
    const router = useRouter()
    const value = ref<string>('')
    const visible = ref<boolean>(false)
    const fareurl = ref<string>('')
    const showCheckbox = ref<boolean>(false)
    const page = reactive({
      current: 1,
      size: 1000
    })
    const showModal = () => {
      visible.value = true
    }

    const handleOk = (e: MouseEvent) => {
      // console.log(e)
      visible.value = false
    }
    const groupchange = () => {
      // console.log(checkboxValue, 'checkboxValue')
    }
    const toBack = (item: any) => {
      request.get(`/hhxs-ssc/sc/chart/restoreChart/${item.hhxsChartId}`).then((res: any) => {
        if (res.data.code === 200) {
          getDataList()
        }
      })
    }
    const copyUrl = () => {
      copyText(fareurl.value).then((res: any) => {
        // console.log(fareurl, res)
        copyState.value = '复制成功'
      })
    }

    const type = ref(1)
    let checkboxValue: any = ref([])
    let dataList: any = ref([])
    const state = reactive({
      indeterminate: true,
      checkAll: false,
      checkedList: [],
    })
    const onSearch = (searchValue: string) => {
      // console.log('use value', searchValue)
      // console.log('or use this.value', value.value)
      getDataList()
    }
    const onCheckAllChange = (e: any) => {
      for (let i = 0; i < dataList.value.length; i++) {
        checkboxValue.value.push(dataList.value[i].hhxsChartId)
      }
      Object.assign(state, {
        checkedList: e.target.checked ? checkboxValue : [],
        indeterminate: false,
      })
      // showCheckbox.value = e.target.checked
    }
    const changetype = (val: number) => {
      val === 1 ? type.value = 2 : type.value = 1
    }
    const getDataList = () => {
      request.post(`/hhxs-ssc/sc/chart/recycleBinList`, {
        title: searchValue.value,
        size: page.size,
        current: page.current
      }).then((res: any) => {
        dataList.value = res.data.data.records
      })
    }
    const toDetail = (id: string) => {
      router.push({
        path: '/freeeditor',
        query: {
          id: id
        }
      })
    }
    const handledelete = () => {
      // console.log(checkboxValue.value)
      if (checkboxValue.value.length === 0) {
        message.warn('请选择要删除的项目')
      }
      request.post('/hhxs-ssc/sc/chart/recycleBinDeleteBatch', checkboxValue.value).then((res: any) => {
        if (res.data.code === 200) {
          getDataList()
        }
      })
    }
    const deleteitem = (item: any) => {
      request.get(`/hhxs-ssc/sc/chart/recycleBinDelete/${item.hhxsChartId}`).then((res: any) => {
        if (res.data.code === 200) {
          getDataList()
        }
      })
    }
    const getBoxHeight = () => {
      const width = (getBoxWidth('.list') / 5) - 40
      height.value = (width * 208 / 248) + 43
    }

    watch(
      () => state.checkedList,
      val => {
        state.checkAll = val.length === dataList.value.length
      },
    )
    watch(
      () => type.value,
      val => {
        // console.log(val)
        nextTick(() => {
          val === 1 ? getBoxHeight() : ''
        })
      },
    )
    onMounted(() => {
      getDataList()
      getBoxHeight()
      window.addEventListener('resize', () => {
        type.value === 1 ? getBoxHeight() : ''
      })
    })
    return {
      ...toRefs(state),
      onSearch,
      onCheckAllChange,
      changetype,
      type,
      value,
      getDataList,
      handledelete,
      checkboxValue,
      dataList,
      toDetail,
      deleteitem,
      toBack,
      handleOk,
      showModal,
      copyUrl,
      fareurl,
      visible,
      showCheckbox,
      groupchange,
      getBoxHeight,
      height,
      copyState,
      searchValue,
      page,
      sousuo
    }
  },
})
</script>
<style>
/* 控制主体颜色 */
.draw_atooltip .ant-tooltip-inner {
  color: #333 !important;
  background-color: #fff !important;
}

/* 控制三角形颜色 */

.draw_atooltip .ant-tooltip-arrow-content {
  background-color: #fff;
}
</style>
<style lang='scss' scoped>
// 全部删除样式
.quanbushanchu {
  .reduction {
    color: #6294ff;
    margin-left: 10px;
    float: left;
    background: #fff;
    height: 42px;
    line-height: 42px;
    box-shadow: 0 4px 20px 0 rgba(87, 98, 253, 0.1);
    display: flex;
    padding-right: 10px;
    border-radius: 8px;
    cursor: pointer;

    dd {
      background: #fff1f2;
      border-radius: 8px;
      width: 42px;
      height: 42px;
      text-align: center;
      margin-right: 10px;
    }
  }

  .cancelDeletion {
    width: 86px;
    height: 42px;
    background: #fff;
    border: 1px solid rgba(230, 229, 255, 1);
    border-radius: 10px;
    cursor: pointer;
    margin-right: 20px;

    &:hover {
      color: $textH2Color;
    }
  }

  .batchDelete {
    width: 86px;
    height: 42px;
    background: #fff;
    border: 1px solid rgba(230, 229, 255, 1);
    border-radius: 10px;
    cursor: pointer;

    &:hover {
      color: $textH2Color;
    }
  }

  .deleteAllFunction {
    .selectAll {
      width: 86px;
      height: 42px;
      background: #fff;
      border: 1px solid rgba(230, 229, 255, 1);
      border-radius: 10px;
    }

    button {
      float: left;
    }

    .delete {
      margin-left: 20px;
      float: left;
      background: #fff;
      height: 42px;
      line-height: 42px;
      box-shadow: 0 4px 20px 0 rgba(87, 98, 253, 0.1);
      display: flex;
      padding-right: 10px;
      border-radius: 8px;
      cursor: pointer;
      color: #ff6370;

      dd {
        background: #fff1f2;
        border-radius: 8px;
        width: 42px;
        height: 42px;
        text-align: center;
        margin-right: 10px;
      }
    }
  }
}

.tips {
  background: #fff;

  li {
    padding: 0 20px;
    line-height: 32px;
    cursor: pointer;

    &:hover {
      color: $textH2Color;
    }
  }
}

.modal {
  .flex {
    display: flex;
  }

  h2 {
    padding: 10px 0;
    font-size: 18px;
  }
}

.contentlist {
  background: #fff;
  border-radius: 30px;
  height: 100%;
  padding: 30px 0;
  margin: 0 20px 20px 0;

  .top {
    display: flex;
    padding: 0 40px;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;

      .appIcon-iconfont {
        padding-right: 5px;
      }

      .selectall {
        padding-right: 20px;
        margin-right: 25px;
      }

      .type {
        cursor: pointer;

        .appIcon-iconfont {
          color: #afacc7;
        }
      }
    }

    .right {
      display: flex;
      align-items: center;

      .delete {
        margin-right: 30px;
        background: #fff;
        height: 42px;
        line-height: 42px;
        box-shadow: 0 4px 20px 0 rgba(87, 98, 253, 0.1);
        display: flex;
        padding-right: 10px;
        border-radius: 8px;
        cursor: pointer;
        color: #ff6370;

        dd {
          background: #fff1f2;
          border-radius: 8px;
          width: 42px;
          height: 42px;
          text-align: center;
          margin-right: 10px;
        }
      }

      .select {
        color: $textH2Color;
      }

      .searchclass {
        // position: absolute;
        margin-right: 20px;
        width: 42px;
        height: 42px;
        background: #fff;
        border: 1px solid rgba(243, 243, 255, 1);
        box-shadow: 0 0 20px 0 rgba(104, 108, 232, 0.15);
        border-radius: 21px;
        text-align: center;
        line-height: 42px;
        right: 30px;

        i {
          font-size: 16px;

          &:hover {
            color: $textH2Color;
            cursor: pointer;
          }
        }
      }

      .ant-input-search {
        margin-right: 20px;
        border: 0;
        height: 42px;
        background: #f6f8ff;
        border-radius: 20px;

        ::v-deep(.ant-input-search-icon) {
          position: absolute;
          width: 42px;
          height: 42px;
          text-align: center;
          line-height: 56px;
          border-radius: 50%;
          background-color: #686ce8;
          right: 0;
          top: 0;

          svg {
            font-size: 21px;
            color: #fff;
          }
        }

        ::v-deep(input.ant-input) {
          background: none;
        }
      }
    }
  }

  .list2 {
    overflow: hidden;
    height: calc(100% - 50px);

    ul {
      padding: 10px 0;
      height: 100%;
      overflow-y: scroll;
    }

    li {
      display: flex;
      height: 80px;
      align-items: center;
      justify-content: space-between;
      margin-left: 20px;
      margin-right: 20px;
      padding: 0 20px;

      &:hover {
        box-shadow: 0 2px 20px 0 rgba(87, 98, 253, 0.13);
        border-radius: 15px;

        .edit {
          .appIcon-iconfont {
            color: $textH2Color;
          }
        }
      }

      .box {
        display: flex;
        align-items: center;
        font-size: 18px;

        p {
          cursor: pointer;
        }

        img {
          width: 63px;
          height: 54px;
          border-radius: 8px;
          margin: 0 20px;
          cursor: pointer;
        }
      }

      .edit {
        display: flex;

        dd {
          margin-right: 20px;
        }

        .appIcon-iconfont {
          color: $textDisabledColor;
          font-size: 22px;
        }
      }
    }
  }

  .list {
    overflow: hidden;
    height: calc(100% - 50px);

    ul {
      height: 100%;
      overflow-y: scroll;
      padding-left: 40px;
      padding-top: 15px;
    }

    li {
      float: left;
      margin: 0 40px 40px 0;
      box-sizing: border-box;
      width: calc(20% - 40px);
      box-shadow: 0 0 30px 0 rgba(47, 50, 134, 0.1);
      border-radius: 16px;
      background: #fff;
      transition: 0.5s all ease;
      overflow: hidden;
      height: 250px;

      &:hover {
        box-sizing: border-box;
        border: 1px solid $textH2Color;
        background: $textH2Color;

        p {
          color: #fff;
          font-size: 16px;
        }

        .box {
          height: calc(100% - 43px);

          .mask,
          .edit {
            opacity: 1;
          }
        }
      }

      .box {
        background-size: cover;
        height: calc(100% - 43px);
        width: 100%;
        border-radius: 16px;
        position: relative;
        overflow: hidden;

        img {
          width: 100%;
        }

        .mask {
          position: absolute;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.3);
          left: 0;
          top: 0;
          border-radius: 16px;
          z-index: 8;
          opacity: 0;
        }

        .checkbox {
          position: absolute;
          left: 18px;
          top: 18px;
          z-index: 9;
        }

        .edit {
          position: absolute;
          right: 10px;
          bottom: 10px;
          display: flex;
          z-index: 9;
          opacity: 0;

          dd {
            width: 30px;
            height: 30px;
            background: #fff;
            border-radius: 8px;
            color: #afacc7;
            text-align: center;
            line-height: 30px;
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }

      p {
        font-size: 16px;
        line-height: 42px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 10px;
      }
    }
  }
}
</style>
